<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.4.2.props验证 父向子通信,复杂数据类型</title>
</head>
<body>

    <!--注意：在标签中是没有大小写之分的，用-来替代,如js中组件叫myList,那么标签中应该是 my-list -->

    <div id="components-demo">
        <!-- 使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件自己的属性lessons -->
        <ulli v-bind:items="lesstons"/>
        <!--<ulli :items="lesstons"/>-->
    </div>

    <!--<script src="node_modules/vue/dist/vue.js"></script>-->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script type="text/javascript">
        // 全局组件
//        Vue.component("ulli", {
//            template:'<ul><li v-for="item in items" :key="item.id">{{item.id}} - {{item.name}}</li></ul>',
//            props:['items']
//            props:{
//                items:{
//                    type:Array,
//                    default:[],
//                    requried:true
//                }
//            }
//        });

        // 局部组件
        var ulliVar = {
            template:'<ul><li v-for="item in items" :key="item.id">{{item.id}} - {{item.name}}</li></ul>',
//            props:['items']
            props:{
                items:{
                    type:Array,
                    default:[],
                    required:true
                }
            }
        }
//            - 这个子组件可以对 items 进行迭代，并输出到页面。
//            - props：定义需要从父组件中接收的属性
//            - items：是要接收的属性名称
//            - type：限定父组件传递来的必须是数组
//            - default：默认值
//            - required：是否必须


        var app = new Vue({
            el:"#components-demo",
            data:{
                lesstons:[
                    {id:1,name:'Java'},
                    {id:2,name:'GoLang'},
                    {id:3,name:'C++'}
                ]
            },
            components:{
                ulli:ulliVar
            }
        });
    </script>
</body>
</html>